<template>
  <div class="videomain">
      <div class="loading" v-if="loading">
      Loading...
    </div>
    <!-- <div v&#45;demo="{ color: 'white', text: 'hello!' }"></div> -->
    <!-- <div v&#45;demo="'ddd'"></div> -->
    <!-- <h1 myd:aa>testdirective</h1> -->
    <!-- <input v&#45;focus style="margin:50px"> -->
    <h1  v-if="learn">    learning </h1>
    <div v-if="error" class="error">
      {{ error }}
    </div>
    <!-- <swiper :list="demo01_list" v&#45;model="demo01_index" @on&#45;index&#45;change="demo01_onIndexChange"></swiper> -->
    <img  style="width:100vw" src="../assets/goldexam.png" alt="黄金考试" />
    <!-- <p>{{all_groupjrtz}}</p> -->
    <!-- <router&#45;link to="/CourseCarts">kkkkkkkk</router&#45;link> -->
    <flexbox :gutter="0"  wrap="wrap"   >
      <flexbox-item  :span="1/4"  @click.native="linker(a)" warp="wrap" v-for="a in querylabel">
          <img class="tag-cover" v-if="a.id !== 'YXHK'" :src="loadImage(a.id)" alt="">
          <h5 class="tag-title" v-if="a.id !== 'YXHK'" >{{a.name}}</h5>
      </flexbox-item>
    </flexbox>
    <divider>优选好课</divider>
    <flexbox :gutter="0"     v-if="querygroup.body" wrap="wrap">

      <flexbox-item   v-for="i in querygroup.body.knowledgeGroupList":span="1/2" :order="1">
        <p v-for="m in i.children"><span>{{m}}</span></p>
            <card @click.native="goDetail(i.id)" >
       <img slot="header" :src="i.cover" style="width:100%;display:block;">
       <div slot="content" class="card-padding">
         <p style="color:#999;font-size:12px;">{{i.title}}</p>
         <p style="font-size:14px;line-height:1.2;">
           <flexbox style="font-size:14px;line-height:1.2;" :margin-left=0>
           <flexbox-item style="color:#999"><img class="money_icon" src="../assets/images/money_icon.png" />{{i.buyReward}}</flexbox-item>
           <flexbox-item>￥{{i.price}}</flexbox-item>
        </flexbox>
         </p>
       </div>
   </card>
      </flexbox-item>
    </flexbox>

  </div>
</template>
<style lang="less" >

  .money_icon{ width: 13px; padding-top: 3px; padding-right:3px ; }
.tag-cover {
    width: 30%;
    height: 50%;
    text-align: center;
    margin: 0 35%
}
.tc{ text-align: center;}
.tag-title {.tc}
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/tap.less';
.weui-panel{
  padding:16px;
}
.videomain 	{

}
</style>
  <script>
import { Grid, GridItem, GroupTitle,  Flexbox,FlexboxItem, Card, Divider, Swiper, SwiperItem, XButton } from 'vux'
import myd from '../directives/test/test.js'
const baseList = [{
  url: 'javascript:',
  img: 'https://static.vux.li/demo/1.jpg',
  title: '送你一朵fua'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/2.jpg',
  title: '送你一辆车'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/3.jpg',
  title: '送你一次旅行'
}]
import Vue from 'vue'
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
      // Focus the element
      el.focus()
    }
})
Vue.directive('demoij', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})
Vue.directive('demo', {
    inserted: function () {},
    update: function () {},
    componentUpdated: function () {},
    unbind: function () {},
    bind: function (el, binding, vnode) {
     el.addEventListener('click', function(event) {
            console.info(399919991999456,el);

       // event.stopProgagation()
                     // if ( [user is not subscribed] ) { event.stopProgagation();  }
                 })
        var s = JSON.stringify
      console.info(3344455);
      console.info(Event,binding.value);
      Event.fire('ss')
     el.style.backgroundColor = "red"
      el.handler = function(e) {
       console.log('hi clicking')
      }
      // el.innerHTML =
      //   'name: '       + s(binding.name) + '<br>' +
      //   'value: '      + s(binding.value) + '<br>' +
      //   'expression: ' + s(binding.expression) + '<br>' +
      //   'argument: '   + s(binding.arg) + '<br>' +
      //   'modifiers: '  + s(binding.modifiers) + '<br>' +
      //   'vnode keys: ' + Object.keys(vnode).join(', ')
    }
})
export default {
  // directives: {
   // demo: {},
    // demo,
    // focus: {
        // directive definition
      // }
  // },
  // directives:{ 'myd':myd },
  data () {
    return {
        loading: false,
      learn: false,
            post: null,
            error: null,
    demo01_list: baseList,
      demo01_index: 0,
    knowledge:false,
    isActive:false,
     knowledge_label:{
       actionName:"QueryKnowledgeTag",
       url: 'baseapi',
       postData: {
      "treeView":true
       }
     },

     knowledge_group:{
       actionName:"QueryKnowledgeGroup",
       url: 'baseapi',
       postData: {
    // 课程组ID（为空时查询全部）
          // "knowledg__eGroupId":"36ada1d166474abeb908f9fcbc051dd2",
          // 课程分类ID（为空时查询全部）
          // "classifyId":"e1dcb41fe9344eaba73af8bf9c6f5ace",
          // 课程级别ID（为空时查询全部）
          // "gradeId":"c9f6de99c0944a07b695a578d4cbc449",
           //是否包含视频课程 (为空时查询全部)
          // “haveVideo”:”true”,
         //标签ID (为空时查询全部，多个以逗号隔开)
          "tagIds":"YXHK" ,
           //页数(可为空)
          "pageNo":1,
         //页面显示条数(可为空)，与页数一起使用
          "pageSize":4
       }
       },
     jrtzknowledge_group:{
       actionName:"QueryKnowledgeGroup",
       key:'groupjrtz',
       url: 'baseapi',
       postData: {
    // 课程组ID（为空时查询全部）
          // "knowledg__eGroupId":"36ada1d166474abeb908f9fcbc051dd2",
          // 课程分类ID（为空时查询全部）
          // "classifyId":"e1dcb41fe9344eaba73af8bf9c6f5ace",
          // 课程级别ID（为空时查询全部）
          // "gradeId":"c9f6de99c0944a07b695a578d4cbc449",
           //是否包含视频课程 (为空时查询全部)
          // “haveVideo”:”true”,
         //标签ID (为空时查询全部，多个以逗号隔开)
          "tagIds":"JRTZ" ,
           //页数(可为空)
          "pageNo":"",
         //页面显示条数(可为空)，与页数一起使用
          "pageSize":""

       }
     }
    }
  },
  created() {
    // this.onChange()
    // this.onChange2()
    // alert(111)
       this.$store.commit('restful_api',this.knowledge_label)
   setTimeout(function () {
     this.$store.commit('restful_api',this.knowledge_group)
     this.$store.commit('restful_api',this.jrtzknowledge_group)
     // alert(3)
   }.apply(this),1000 );
  },
  // directives: {
  //   TransferDom
  // },
  components: {
    Grid, GridItem, GroupTitle,  Flexbox, FlexboxItem, Card, Divider, Swiper, SwiperItem,XButton
  },
  methods: {

    linker(a) {
      console.info('its linker',JSON.stringify(a.id));
      this.jrtzknowledge_group.postData.tagIds = a.id
      // this.jrtzknowledge_group.actionName= a.id
      this.$store.commit('restful_api',this.jrtzknowledge_group)

      this.$router.push('/CourseCarts')
    },
      goDetail(s) {
        var x = {
               actionName:"QueryKnowledgeGroup",
               url: 'baseapi',
               postData: {
            // 课程组ID（为空时查询全部）
                  // "knowledg__eGroupId":"36ada1d166474abeb908f9fcbc051dd2",
                  // 课程分类ID（为空时查询全部）
                  // "classifyId":"e1dcb41fe9344eaba73af8bf9c6f5ace",
                  // 课程级别ID（为空时查询全部）
                  // "gradeId":"c9f6de99c0944a07b695a578d4cbc449",
                   //是否包含视频课程 (为空时查询全部)
                  // “haveVideo”:”true”,
                 //标签ID (为空时查询全部，多个以逗号隔开)
                  // "tagIds":"YXHK" ,
                   //页数(可为空)
                  // "pageNo":1,
                 //页面显示条数(可为空)，与页数一起使用
                  // "pageSize":4
                 knowledgeGroupId:s
               }
        }
        this.$store.commit('restful_api',x)
        this.$router.push('/Vclassdetail/' +s)
      },
      loadImage (imgName) {
       // console.info(this.querylabel);
        if(imgName == undefined || imgName == 22){
          // alert(33)
          return require('../assets/@2x.png')
        }
          return require('../assets/' + imgName + '.png')
          } ,
    onChange2(){
       this.$store.commit('restful_api',this.knowledge_group)
    },
    onChange(){
       this.$store.commit('restful_api',this.knowledge_label)
    },

    demo01_onIndexChange (index) {
      this.demo01_index = index
    }
  },
  beforeDestory () {

  },
  watch: {
    // if (path=='/videomain'){
    // console.log('router is videomain')
    // }
  },
  computed: {
    all_groupjrtz () {
      return this.$store.getters.all_groupjrtz
    },
    singlegroup () {
      return this.$store.getters.all_singlegroup
    },
    mygroup(){
      return this.$store.getters.all_ngroup
    },
    mylabel(){
      return this.$store.getters.all_nlabel
    },
    querylabel(){
      // return 33
      if(this.mylabel)
          {
            var y = []
            let x =  this.$store.getters.all_nlabel.body.tagList
            x.map(function(a,b){
              if (a.id == "SPXT"){
                console.info(a,a.id);
             y = a.children
              }
            })
          }
      return y

      }
   ,
    querygroup(){
return this.$store.getters.all_restful_QueryKnowledgeGroup
  }
  } ,
  mounted () {
     this.$nextTick(function(){
        console.log("QueryKnowledgeTag")
  Event.listen("queryknowledge",(e) =>{
         this.$vux.alert.show({
          title: '查询中',
          content: this.$t(e),
          onShow () {
      console.log('Plugin: I\'m showing')
          },
          onHide () {
      console.log('Plugin: I\'m hiding  now')
          }
      })

  })
     })
     this.handler = () => {
       if(this.path ==='/VideoClass') {
        console.log("videomain")
         alert(38438)
         this.learn = true
       }
     }
  }
}
</script>

